<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        th{
            width: 180px;
        }
    </style>
</head>
<body>
<h2>流水展示</h2>
<form action="/e/flow/getFlowByT" method="post">
    <span>
    交易时间：
    <div class="date1">
        <select name="tradeTime"></select>
        <span>年</span>
        <select name="tradeTime"></select>
        <span>月</span>
        <select name="tradeTime"></select>
        <span>日</span>
    </div></span>
    <br>
    交易类型：
    <select name="tradeType">
        <option selected value="5">全部</option>
        <option value="4">提现</option>
        <option value="3">转账</option>
        <option value="1">充值</option>
    </select><br><br>
    <input type="submit" value="查询">
</form>
<!--    遍历集合中的每一条流水并展示-->
<div align="center">
    <table border="2px">
        <thead>
            <tr>
                <th>流水号</th>
                <th>账号</th>
                <th>电子账户</th>
                <th>付款人姓名</th>
                <th>付款人标识</th>
                <th>交易金额</th>
                <th>交易类型</th>
                <th>交易时间</th>
                <th>收款人姓名</th>
                <th>收款人标识</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="flow:${flows}">
                <td th:text="${flow.getFId()}"></td>
                <td th:text="${flow.account}"></td>
                <td th:text="${flow.getEId()}"></td>
                <td th:text="${flow.getIName()}"></td>
                <td th:text="${flow.getIId()}"></td>
                <td th:text="${flow.tradeMoney}"></td>
                <td th:if="${flow.getTradeType()==1}">充值</td>
                <td th:if="${flow.getTradeType()==3}">转账</td>
                <td th:if="${flow.getTradeType()==4}">提现</td>
                <td th:if="${flow.getTradeType()>4||flow.getTradeType()<1}">未知</td>
                <td th:text="${flow.tradeTime}"></td>
                <td th:text="${flow.getTName()}"></td>
                <td th:text="${flow.getTId()}"></td>
            </tr>
        </tbody>
    </table>
    <!--    pages代表总页数-->
    <p>当前第 <span th:text="${page.getCurrent()}"></span> 页,共 <span th:text="${page.pages}"></span> 页</p>
    <a th:href="@{getFlow(pageNum=1)}">首页</a>
    <a th:href="@{getFlow(pageNum=${page.getCurrent()!=1}?${page.getCurrent()-1}:1)}">上一页</a>
    <a th:href="@{getFlow(pageNum=${page.getCurrent()==page.getPages()}?${page.getPages()}:${page.getCurrent()+1})}">下一页</a>
    <a th:href="@{getFlow(pageNum=${page.pages})}">尾页</a>
</div>
</body>
<script type="text/javascript">
    window.onload = function () {
        var selects = document.getElementsByTagName("select");//通过标签名获取select对象
        var date = new Date();
        var nowYear = date.getFullYear();//获取当前的年
        for (var i = nowYear; i >= nowYear - 100; i--) {
            var optionYear = document.createElement("option");
            optionYear.innerHTML = i;
            optionYear.value = i;
            selects[0].appendChild(optionYear);
        }

        for (var i = 1; i <= 12; i++) {
            var optionMonth = document.createElement("option");
            optionMonth.innerHTML = i;
            optionMonth.value = i;
            selects[1].appendChild(optionMonth);
        }

        getDays(selects[1].value, selects[0].value, selects);

        // 初始化change事件监听
        [selects[0], selects[1]].forEach(function (item) {
            item.addEventListener('change', setDays)
        })
    }

    // 获取某年某月存在多少天
    function getDaysInMonth(month, year) {
        var days;
        if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
            days = 31;
        } else if (month == 4 || month == 6 || month == 9 || month == 11) {
            days = 30;
        } else {
            // 判断是否为润二月
            if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
                days = 29;
            } else {
                days = 28;
            }
        }
        return days;
    }

    function setDays() {
        var selects = document.getElementsByTagName("select");
        var year = selects[0].options[selects[0].selectedIndex].value;
        var month = selects[1].options[selects[1].selectedIndex].value;
        getDays(month, year, selects);
    }

    function getDays(month, year, selects) {
        var days = getDaysInMonth(month, year);

        selects[2].options.length = 0;

        for (var i = 1; i <= days; i++) {
            var optionDay = document.createElement("option");
            optionDay.innerHTML = i;
            optionDay.value = i;
            selects[2].appendChild(optionDay);
        }
    }
</script>
</html>